<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width">
    <title>酷UI前端UI设计</title>
    <link rel="stylesheet" href="../src/js/dependence/jquery-easyui-1.5/themes/default/easyui.css">
    <script type="text/javascript" src="../src/js/dependence/jquery-easyui-1.5/jquery.min.js"></script>
    <script type="text/javascript" src="../src/js/dependence/jquery-easyui-1.5/jquery.easyui.min.js"></script>
    <!--<script type="text/javascript" src="../src/js/dependence/mootools.1.4.5/mootools-core-1.4.5.js"></script>
    -->
    <script type="text/javascript">
        var dragAccordion = {
            wStep:5,
            hStep:5,
            initDragAccordion:function (){
                var _this = this;
                var accordion = $('#drag_accordion');
                accordion.html("");
                var groupBox = $('<div title="基础控件" data-options="iconCls:\'icon-ok\'" style="padding:10px;"></div>');
                var groupItem = $('<ul class="drag-box" id="drag_box_base" />');
                var groupModules = {
                    input:{
                        icon:"",
                        text:"输入框"
                    },
                    div:{
                        icon:"",
                        text:"DIV"
                    }
                };
                for(var key in groupModules){
                    if(key!="base"){
                        var _content = '<li class="draggable" c-type="'+key+'">';
                        _content += '<img width="18px" src="' +groupModules[key].icon +'" />  ';
                        _content += groupModules[key].text +'</li>';
                        groupItem.append(_content);
                    }
                }
                groupBox.append(groupItem);
                accordion.append(groupBox);
                accordion.accordion({
                    fit:true
                });
            },
            initDragAccordionEvent:function (){
                var li = null;
                var is_start = false;
                var _this = this;
                var moveBox = $("#designer-box");
                var position = moveBox.offset();
                //左侧拖拽控件的事件
                $(".drag-box .draggable").mousedown(function (e) {
                    e.preventDefault();
                    is_start = true;
                    li = $(this).clone();
                    li.css("position", "absolute").css("left", e.clientX).css("top", e.clientY);
                    li.appendTo("body");
                });
                $(document).mousemove(function (e) {
                    e.preventDefault();
                    if (is_start) {
                        li.css("left", e.clientX).css("top", e.clientY);
                    }
                }).mouseup(function (e) {
                    e.preventDefault();
                    if (is_start) {
                        var classType = li.attr("c-type");
                        console.log(classType);
                        var x = e.clientX-position.left;
                        var y = e.clientY-position.top;
                        x = x - x%_this.wStep;
                        y = y - y%_this.hStep;
                        var div = $("<div>").addClass("move-element").html(classType);
                        div.css("left",x)
                                .css("top",y)
                                .css("width","50px")
                                .css("height","50px");
                        var moveBtn = $("<a>").addClass("move-element-btn");
                        div.append(moveBtn);
                        div.draggable({
                            handle:"a.move-element-btn",
                            onStopDrag:function(e){
                                var _x = $(e.target).parent().offset().left-position.left;
                                var _y = $(e.target).parent().offset().top-position.top;
                                _x = _x - _x%_this.wStep;
                                _y = _y - _y%_this.hStep;
                                $(e.target).parent().css("left",_x).css("top",_y);
                            }
                        });
                        div.resizable({
                            onStopResize:function(e){
                                var _w = $(e.target).width();
                                var _h = $(e.target).height();
                                _w = _w+_this.wStep - _w%_this.wStep;
                                _h = _h+_this.hStep - _h%_this.hStep;
                                $(e.target).width(_w).height(_h);
                            }
                        });
                        moveBox.append(div);
                    }
                    is_start = false;
                    if (li)
                        li.remove();
                });
            }
        };


        $(function () {
            dragAccordion.initDragAccordion();
            dragAccordion.initDragAccordionEvent();
        })
    </script>
    <style>
        .designer-box{
            width:100%;
            height:100%;
            position:relative;
            background:#f7f7f7 url(../src/img/designer_bg.png) repeat;

        }


        .drag-box {
            width:100px;
            float: left;
            padding:0;
        }
        .draggable{
            width: 100px;
            height: 30px;
            /*background: #ccc;*/
            margin: 0 auto;
            margin-bottom: 5px;
        }
        .draggable:hover{
            cursor: move;
        }
        .move-element{
            position:absolute;
            background: #fff;
            min-height: 20px;
            border:1px solid red;
        }
        .move-element:hover>.move-element-btn{
            display: block;
            /*cursor: move;*/
        }
        .move-element-btn{
            display: block;
            position:absolute;
            top:0;
            left:0;
            right:0;
            width:20px;
            height:20px;
            background: url(../src/img/drag.png);
            filter:alpha(opacity=70); /*IE滤镜，透明度50%*/
            -moz-opacity:0.7; /*Firefox私有，透明度50%*/
            opacity:0.7;/*其他，透明度50%*/
        }

    </style>
</head>
<body class="easyui-layout">
    <div data-options="region:'north',title:'工具栏',split:false,collapsible:false" style="height:80px;">

    </div>
    <!--
    <div data-options="region:'south',split:false" style="height:30px;text-align: center;color:#999;line-height: 28px;overflow: hidden;">
        版权所有，违者必究
    </div>-->
    <div data-options="region:'east',title:'属性设置',split:false" style="width:200px;">
        
    </div>
    <div data-options="region:'west',title:'控件列表',split:false" style="width:200px;">
        <div id="drag_accordion"></div>
    </div>
    <div data-options="region:'center',title:'设计区域'" style="padding:0;">
        <div id="designer-box" class="designer-box">

        </div>
    </div>
</body>
</html>